<%@ Page Title="" Language="C#" MasterPageFile="~/Themes/Default/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="MvcContrib.UI.Html" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
<%=Html.Resource("Department", "TITLE_TRANSFER_STAFF")%>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2><%=Html.Resource("Department", "TITLE_TRANSFER_STAFF")%></h2>
<div id="treeview" class="hidden">
    <ul>
        <%Html.RenderPartial("DepartmentItemControl", ViewData.Model);%>
    </ul>
</div>
<table style="width:600px">
<tr>
<td>
<a tabindex="0" href="#treeview" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="dropdown1">
    <span class="ui-icon ui-icon-triangle-1-s"></span><span id="menuSelection1"><%=Html.Resource("Department", "CHOOSE_DEPARTMENT")%></span>
</a>
</td>
<td style="width:40px">

</td>
<td>
<a tabindex="0" href="#treeview" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="dropdown2">
    <span class="ui-icon ui-icon-triangle-1-s"></span><span id="menuSelection2"><%=Html.Resource("Department", "CHOOSE_DEPARTMENT")%></span>
</a>
</td>
</tr>
<tr>
<td style="vertical-align: top; width:250px">
<div id="select1Container">
<select class="userselect" id="userselect1" multiple="multiple" size="5" style="width:250px;height:200px">
<option value="-1"></option>
</select>
</div>
</td>
<td style="width:40px">
<div id="left2right" class="ui-state-default ui-corner-all" style="width: 18px; height: 18px;">
<span class="ui-icon ui-icon-arrowthick-1-e"/>
</div>
<div id="right2left" class="ui-state-default ui-corner-all" style="width: 18px; height: 18px;">
<span class="ui-icon ui-icon-arrowthick-1-w"/>
</div>
</td>
<td style="vertical-align: top;width:250px">
<div id="select2Container">
<select class="userselect" id="userselect2" multiple="multiple" size="5" style="width:250px;height:200px">
<option value="-1"></option>
</select>
</div>
</td>
</tr>
</table>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#dropdown1").menu({
                content: $('#treeview').html(),
                crumbDefaultText: ' ',
                itemChoosedState: function(item) {
                    $('#menuSelection1').text($(item).text());
                    var departmentid = $(item).parent().attr("departmentid");
                    $('#menuSelection1').attr("departmentid", departmentid);
                    $("#select1Container").empty();
                    $('#select1Container').text("<%=Html.Resource("Global", "LOADING")%>");
                    $("#select1Container").load("/Department/UsersInDepartment", { id: departmentid }, function() {
                        $('#select1Container .userselect').attr("id", "userselect1");
                        $("#userselect1").msDropDown();
                    });
                }
            });
            $("#dropdown2").menu({
                content: $('#treeview').html(),
                crumbDefaultText: ' ',
                itemChoosedState: function(item) {
                    $('#menuSelection2').text($(item).text());
                    var departmentid = $(item).parent().attr("departmentid");
                    $('#menuSelection2').attr("departmentid", departmentid);
                    $("#select2Container").empty();
                    $('#select2Container').text("<%=Html.Resource("Global", "LOADING")%>");
                    $("#select2Container").load("/Department/UsersInDepartment", { id: departmentid }, function() {

                        $('#select2Container .userselect').attr("id", "userselect2");
                        $("#userselect2").msDropDown();
                    });
                }
            });
            $('#userselect1').msDropDown();
            $('#userselect2').msDropDown();

            $('#left2right').click(function() {
                //validate the left selectbox
                var selectedOptions = $("#userselect1 option:selected");
                if (selectedOptions.length == 0) {
                    alert('Please select the user in the left department');
                    return;
                }
                if (selectedOptions.eq(0).val() == "-1") {
                    alert('Please select the left department');
                    return;
                }
                if (selectedOptions.eq(0).val() == "-2") {
                    return;
                }
                //validate the right selectbox
                var targetSelectOptions = $("#userselect2 option");
                if (targetSelectOptions.length == 1 && targetSelectOptions.eq(0).val() == "-1") {
                    alert('Please select the right department')
                    return;
                }
                if (targetSelectOptions.eq(0).val() == "-2") {
                    //remove the default option
                    targetSelectOptions.remove();
                }
                var prevDepartmentId = $("#menuSelection1").attr("departmentid");
                var nextDepartmentId = $("#menuSelection2").attr("departmentid");
                var userids = new Array();
                //move the option from left to right
                selectedOptions.each(function() {
                    $(this).clone().appendTo($("#userselect2"));
                    var userid = $(this).val();
                    userids.push(userid);
                    $(this).remove();
                });
                $.post("/Department/MoveUsersBetweenDepartments", { "userids": userids, "nextDepartmentId": nextDepartmentId, "prevDepartmentId": prevDepartmentId });
                document.getElementById("userselect1").refresh();
                document.getElementById("userselect2").refresh();
            });

            $('#right2left').click(function() {
                //validate the left selectbox
                var selectedOptions = $("#userselect2 option:selected");
                if (selectedOptions.length == 0) {
                    alert('Please select the user in the right department');
                    return;
                }
                if (selectedOptions.eq(0).val() == "-1") {
                    alert('Please select the right department');
                    return;
                }
                if (selectedOptions.eq(0).val() == "-2") {
                    return;
                }
                //validate the right selectbox
                var targetSelectOptions = $("#userselect1 option");
                if (targetSelectOptions.length == 1 && targetSelectOptions.eq(0).val() == "-1") {
                    alert('Please select the left department')
                    return;
                }
                if (targetSelectOptions.eq(0).val() == "-2") {
                    //remove the default option
                    targetSelectOptions.remove();
                }
                //move the option from left to right
                selectedOptions.each(function() {
                    $(this).clone().appendTo($("#userselect1"));
                    $(this).remove();
                });
                document.getElementById("userselect1").refresh();
                document.getElementById("userselect2").refresh();
            });
        });
    </script>
    

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
        <%=Html.Stylesheet("~/Content/fg.menu.css")%>
        <%=Html.ScriptInclude("~/Scripts/fg.menu.js")%>
        <style type="text/css">
            .hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
            	.fg-button { clear:left; margin:0 4px 0px 5px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
	.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
	a.fg-button { float:left;  }
	button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */
	
	.fg-button-icon-left { padding-left: 2.1em; }
	.fg-button-icon-right { padding-right: 2.1em; }
	.fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
	.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
	.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	
	
	.fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }

        </style>
             <!-- style exceptions for IE 6 -->
	<!--[if IE 6]>
	<style type="text/css">
		.fg-menu-ipod .fg-menu li { width: 95%; }
		.fg-menu-ipod .ui-widget-content { border:0; }
	</style>
	<![endif]-->	

</asp:Content>